<template>
  <view class="my-404">
    <view v-if="mask.show" class="input-content-404">
      <!-- 绑定手机号 -->
      <view class="input-inner">
        <view class="input-content">
          <view class="input-head">
            <view class="input-head-title">绑定手机</view>
            <view class="input-head-tip">资金监管 一触即达</view>
          </view>
          <view class="input-body">
            <view class="input-phone-tip">+86</view>
            <view class="input-phone-input">
              <u-input
                v-model="phone"
                maxlength="11"
                type="number"
                :border="false"
                placeholder="请输入手机号"
                focus
                trim
                @change="inputChange"
                @confirm="goLigon"
              />
            </view>
          </view>
          <view class="input-phone-warning">
            <view v-show="mask.phoneErr">{{ mask.errTip }}</view>
          </view>

          <view class="input-submit" @click="goLigon">绑 定</view>

        </view>
      </view>
    </view>
    <My-Abnor-Page
      v-else
      color="plain"
      type="empty"
      tip="抱歉,您无权限进入此应用"
    />
    <!-- :mask-click-able="false" -->

  </view>
</template>

<script type="text/ecmascript-6">
import MyAbnorPage from '@/components/my-abnor-page/my-abnor-page';
import { Message } from '@/utils/utils';

export default {
  components: {
    MyAbnorPage
  },
  data() {
    return {
      phone: '',
      phoneReg: /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d{8}$/,
      mask: {
        show: false,
        phoneErr: false,
        errTip: '手机号验证失败，请重新输入'
      }
    };
  },

  computed: {
    getIsCanLogin() {
      return this.phoneReg.test(this.phone);
    }
  },

  watch: {
    phone: {
      handler: function(v) {
        this.mask.phoneErr = false;
      }
    }
  },
  mounted() {
    const query = this.$route.query;

    // 绑定手机号
    if (query.phoneInput === '1') {
      this.inputPhoneShow();
    }
  },

  methods: {
    goLigon() {
      const { phone, inputReg } = this;
      if (inputReg(phone)) {
        const params = '?phone=' + phone;
        this.$router.push('/login' + params);
      }
    },

    inputPhoneShow() {
      const query = this.$route.query;

      this.mask.show = true;
      // 手机号验证失败
      if (query.errReg === '1') {
        this.mask.phoneErr = true;
      }
    },

    inputChange(v) {
      this.phone = v;
    },

    inputReg(v) {
      const flag = this.phoneReg.test(v);
      if (v === '') {
        Message('请输入手机号');
      } else if (!flag) {
        Message('该手机号码格式错误');
        this.mask.phoneErr = true;
      }

      return flag;
    }
  }
};
</script>

<style lang="scss" scoped>

.my-404 {
  width: 100%;
  height: 100vh;
  background-color: #fff;
  .input-content-404 {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;

    .input-inner {
      width: 100%;
      height: calc(100% - 54px);
      position: relative;
      top: 54px;
      font-size: 17px;
      padding: 0 40px;

      .input-content {
        height: 100%;

        .input-head {
          .input-head-title {
            font-size: 24px;
            color: #303133;
            margin-bottom: 6px;
          }
          .input-head-tip {
            font-size: 17px;
            color: #909399;
          }
        }

        .input-body {
          position: relative;
          margin-top: 68px;
          display: flex;
          border-bottom: 1px solid #dcd9d9;
          .input-phone-tip {
            display: flex;
            align-items: center;
            color: #FF9F21;
            padding-right: 8px;
            &::after {
              content: '';
              position: relative;
              display: inline-block;
              border-right: 1px solid #dcd9d9;
              height: 15px;
              margin-left: 6px;
              top: 1px;
            }
          }

          .input-phone-input {
            flex: 1;
          }
        }

        .input-phone-warning {
          color: #FF654D;
          font-size: 12px;
          padding-top: 4px;
          min-height: 20px;
        }

        .input-submit {
          margin-top: 25px;
          background: linear-gradient(180deg,#53b1ff, #2979ff);
          border-radius: 6px;
          padding: 10px 0;
          color: #fff;
          text-align: center;
          position: relative;
          transition: linear .2s;
          &:active {
            top: 1px;
            background: linear-gradient(180deg,#53b1ff, #2266da);
          }
        }
      }
    }
  }
}

</style>
